/*
 * @Author: Setsuna
 * @Email: setsuna.xyz@qq.com
 * @FilePath: \src\components\FilesView\index.tsx
 * @Date: 2022-03-16 16:19:53
 * @LastEditTime: 2022-08-16 15:09:57
 */
import { UdModal } from '@/lib'
import { matchFileSuffixType } from '@/utils/methods'
import { Empty, message } from 'antd'
import React, { PureComponent } from 'react'
import { WithToolbar } from '../PhotoView'

type IProps = {
  fileUrl: string
  fileName?: string
}

type IState = {}

export default class FilesView extends PureComponent<IProps, IState> {
  state = {}

  private nodeTemplate = () => {
    let { fileUrl, fileName = '附件' } = this.props
    let result: boolean | string = matchFileSuffixType(fileUrl)
    if (!result || result === 'other') {
      return (
        <div style={{ textAlign: 'center' }}>
          {Empty.PRESENTED_IMAGE_SIMPLE}
          <div style={{ lineHeight: 0, color: 'rgba(0,0,0,.25)' }}>未上传文件</div>
        </div>
      )
    } else {
      if (result === 'word' || result === 'excel' || result === 'ppt') {
        return (
          <div
            style={{ color: '#00c1de', cursor: 'pointer' }}
            onClick={() => {
              this.showFileViewModal()
            }}
          >
            {fileName}
          </div>
        )
      } else if (result === 'image') {
        return <WithToolbar imagesList={[{ name: fileName, url: fileUrl }]} />
      } else if (result === 'pdf' || result === 'txt') {
        return (
          <div
            style={{ color: '#00c1de', cursor: 'pointer' }}
            onClick={() => {
              this.showOtherView()
            }}
          >
            {fileName}
          </div>
        )
      }
    }
  }

  private showFileViewModal = () => {
    let { fileUrl, fileName = '附件预览' } = this.props
    const rex = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/
    if (rex.test(fileUrl)) {
      UdModal.open({
        title: fileName,
        width: '80%',
        bodyStyle: { padding: '0' },
        content: (
          <div style={{ height: '700px', overflow: 'hidden' }}>
            <iframe
              title={fileName}
              src={`https://view.officeapps.live.com/op/view.aspx?src=${fileUrl}`}
              width="100%"
              height="100%"
              frameBorder="0"
              style={{ border: 'none' }}
              seamless
            ></iframe>
          </div>
        ),
        footer: null,
      })
    } else {
      message.error('附件URL无效')
    }
  }

  private showOtherView = () => {
    let { fileUrl, fileName = '附件预览' } = this.props
    UdModal.open({
      title: fileName,
      width: '80%',
      bodyStyle: { padding: '0' },
      content: (
        <div style={{ height: '700px', overflow: 'hidden' }}>
          <iframe
            title={fileName}
            src={`${fileUrl}`}
            width="100%"
            height="100%"
            frameBorder="0"
            style={{ border: 'none' }}
            seamless
          ></iframe>
        </div>
      ),
      footer: null,
    })
  }

  render() {
    return this.nodeTemplate()
  }
}
